<template>
  <div class="keyboard-number">
    <div class="keyboard-header">
      <div class="item patient-number" v-if="!!value">{{ value }}</div>
      <div class="item patient-number-desc" v-else>{{ field.options.reportInfoConfig.placeholder }}</div>
    </div>
    <div class="keyboard-body">
      <div v-for="(item) in keyboardOptions" :key="item.key">
        <template v-if="(item.key) ==='enter'">
          <el-button
              class="van-keys"
              :class="{'disable-button': !value}"
              :disabled="!value"
              @click="handleInput(item.key)"
          >
            {{ item.title }}
          </el-button>
        </template>
        <template v-else>
          <!--判断是否是触控-->
          <template v-if="isTouchDevice">
            <div class="van-keys" :class="[item.className]" @touchstart="handleInput(item.key)">
              {{ item.title }}
            </div>
          </template>
          <template v-else>
            <div class="van-keys" :class="[item.className]" @click="handleInput(item.key)">
              {{ item.title }}
            </div>
          </template>
        </template>
      </div>
    </div>
    <div class="keyboard-tips">
      <div class="title" :style="getStyle('tips')">{{ field.options.reportInfoConfig.tipsTitle }}</div>
      <div class="desc">
        <ScrollEditY :content="field.options.reportInfoConfig.tipContent || ''" :pageDuration="10"/>
      </div>
    </div>
  </div>
</template>

<script>
import {Field} from 'vant';
import {pxToVw} from "@/utils/common";
import ScrollEditY from "@c/public/seamlessScroll/ScrollEditY.vue";
import SimpleNumberKeyboard from "@c/public/layer/scenes/simpleNumberKeyboard/index.vue";

export default {
  name: 'ReportKeyboard',

  components: {
    ScrollEditY,
    Field,
    SimpleNumberKeyboard
  },

  props: {
    options: {
      type: Array
    },
    field: {
      type: Object
    },
  },

  data() {
    return {
      timeout: null,
      // 自动清空的等待时间
      timeoutDuration: 15 * 1000,  //10min
      // 输入的参数
      value: '',
      //键盘的参数
      keyboardOptions: [
        {key: '1', title: '1'},
        {key: '2', title: '2'},
        {key: '3', title: '3'},
        {key: '4', title: '4'},
        {key: '5', title: '5'},
        {key: '6', title: '6'},
        {key: '7', title: '7'},
        {key: '8', title: '8'},
        {key: '9', title: '9'},
        {key: 'X', title: 'X'},
        {key: '0', title: '0'},
        {key: 'del', title: '删除', className: 'van-keys-del'},
        {key: 'reset', title: '重置'},
        {key: 'enter', title: '确认'}
      ],
      number: 0,
    }
  },

  computed: {
    // 模板的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = (self.field?.options?.reportInfoConfig) || Array();
        let Obj = Object();
        switch (val) {
          case "head":
            Reflect.set(Obj, "color", (info.headerFontColor));
            Reflect.set(Obj, "height", pxToVw(info.headHeight));
            Reflect.set(Obj, "lineHeight", pxToVw(info.headHeight));
            Reflect.set(Obj, "backgroundColor", (info.headerBackgroundColor));
            return Obj;
          case "list":
            Reflect.set(Obj, "height", pxToVw(info.contentHeight));
            return Obj;
          case "listItem":
            Reflect.set(Obj, "lineHeight", pxToVw(info.lineHeight));
            Reflect.set(Obj, "height", pxToVw(info.lineHeight));
            return Obj;
          case "tips":
            Reflect.set(Obj, "color", (info.tipsFontColor));
            Reflect.set(Obj, "fontSize", pxToVw(info.tipsFontSize));
            return Obj;
        }
      };
    },

    // 判断设备是否是触控
    isTouchDevice() {
      return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
    }

  },


  mounted() {
    //step5 监听页面操作，触发重置超时函数
    window.addEventListener("mousemove", this.resetTimeout);
    window.addEventListener("keydown", this.resetTimeout);
    window.addEventListener("click", this.resetTimeout);
    this.resetTimeout();
  },

  methods: {


    onChange() {},

    onKeyPress(button) {
      this.number = ++(this.number)
    },

    handleInput(key) {
      const self = this;
      switch (key) {
        case 'del':
          this.value = this.value.slice(0, -1);
          break;
        case 'reset':
          this.value = '';
          break;
          // 提交按钮
        case 'enter':
          if (this.value.trim().length > 0) {
            let params = Object();
            Reflect.set(params, 'number', (self.value));
            self.$emit('handleSubmit', params);
            self.value = '';
          }
          break;
        default:
          if (this.value.trim().length < 18) {
            this.value += key
          }
      }
    },

    // 重置定时器时间
    resetTimeout() {
      console.log('wrap-执行-重置定时器时间')
      if (!!(this.timeout)) {
        clearTimeout(this.timeout);
      }

      // 特定时间不做操作关闭抽屉-清空数据
      this.timeout = setTimeout(() => {
        console.log('执行-重置定时器时间')
        this.value = '';
      }, this.timeoutDuration);
    },
  },

  destroyed() {
    window.removeEventListener("mousemove", this.resetTimeout);
    window.removeEventListener("keydown", this.resetTimeout);
    window.removeEventListener("click", this.resetTimeout);
  }

};
</script>


<style lang="scss" scoped>
.keyboard-number {
  height: 100%;
  box-sizing: border-box;

  .keyboard-header {
    padding: 10px 0 12px 0;

    .item {
      text-align: center;
      line-height: 160px;
      height: 160px;
      font-size: 65px;
      outline: none;
      border-radius: 26px;
      background: #fff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .patient-number,
    .patient-number-desc {
      font-family: PingFangSC, PingFang SC, serif;
      font-weight: 500;
      font-size: 72px;
    }
  }

  .keyboard-body {
    display: flex;
    justify-content: space-between;
    flex: 3;
    flex-wrap: wrap;
    user-select: none;
    padding: 0 100px 10px 100px;

    > div {
      flex: 1;
      text-align: center;
      padding: 8px 6px;
      cursor: pointer;
      flex-basis: calc(100% / 3);
      font-size: 62px;
      box-sizing: border-box;

      &:last-child {
        flex-basis: calc((100% / 3) * 2);

        .van-keys {
          color: #fff;
          display: flex;
          align-items: center;
          align-self: center;
          justify-content: center;
          padding: 0 !important;
          background: linear-gradient(225deg, #5abdd1 0%, #4eaad6 39%, #527eda 100%);

          &:active {
            background: #5abdd1;
          }
        }
      }

      &:last-child,
      &:nth-child(13) {
        font-size: 52px;
      }

      .van-keys {
        background-color: #fff;
        cursor: pointer;
        height: 110px;
        line-height: 110px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 24px;
        box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
        font-weight: 400;
        color: #232324;
        text-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);

        &.van-keys-del {
          font-size: 0;
          @include background('design/key-del', center, center);
          background-size: 96px 66px;
        }

        &.disable-button {
          color: #c0c4cc;
          cursor: not-allowed;
          background-image: none;
          background-color: #fff;
          border-color: #ebeef5;

          &:active {
            background-color: #fff;
          }
        }

        &:active {
          background-color: #ebedf0;
        }
      }

      .el-button {
        font-size: 52px;
      }
    }
  }

  .keyboard-tips {
    background: white;
    border-radius: 20px;
    height: calc(100% - 810px);
    overflow: hidden;
    border: 2px solid rgba(221, 221, 221, 1);

    .title {
      font-family: PingFangSC, PingFang SC, serif;
      font-weight: 500;
      font-size: 46px;
      color: #FF902B;
      line-height: 100px;
      text-align: center;
      overflow: hidden;
      border-bottom: 2px solid rgba(144, 147, 153, 0.4);
    }

    .desc {
      font-family: PingFangSC, PingFang SC, serif;
      font-weight: 400;
      font-size: 36px;
      color: #333333;
      line-height: 52px;
      padding: 0 44px;
      margin-top: 28px;
      height: calc(100% - 158px);
      box-sizing: border-box;
      overflow: hidden;
      margin-bottom: 20px;

      :deep(p) {
        line-height: 58px;
      }
    }
  }

}
</style>
